<!-- 长列表 -->
<template>
  <div class="general-list-container">
    <GeneralHeader
    :showNames="shortNameArray"
    :showStyle="columStyle" ></GeneralHeader>
    <div>
        <virtual-list class="general-list-section"
          :data-key="'stock_code'"
          :data-sources="itemDatas"
          :data-component="itemComponent"
          :estimate-size="135"
          :item-class="'list-item-page'"
          :page-mode="false"
          :top-threshold="300"
          :bottom-threshold="300"
          :keeps="100"
          :extra-props="{
            loading: isScrolling,
            showStyle: columStyle,
            showKeys: showKeys,
          }"
          @scroll="handleScroll"
          v-on:totop="totop"
          v-on:tobottom="tobottom"
        >
        </virtual-list>

         <!-- <jt-trade-hold-list
        :holdData="listRes"
        :pageSize="20"></jt-trade-hold-list> -->

      </div>
  </div>
</template>

<script>
import GeneralRow from '../GeneralRow/index.vue'
import GeneralHeader from '../GeneralHeader/index.vue'
import VirtualList from 'vue-virtual-scroll-list'
import listDataVM from './listDataVM.js';

export default {
  name: 'page-mode',
  mixins: [listDataVM],
  components: { 'virtual-list': VirtualList,
    GeneralRow,
    GeneralHeader
   },
  data () {
    return {
      itemComponent: GeneralRow,
      isScrolling: false,
      scrollTimer: null,
      throttleTimer: null
    }
  },

  methods: {
    totop () {
      console.log('reach totop')
    },
    tobottom () {
      console.log('reach tobottom')
    },
    handleScroll () {
      // 节流处理
      if (this.throttleTimer) {
        return
      }
      
      this.throttleTimer = setTimeout(() => {
        this.throttleTimer = null
        this.isScrolling = true
        
        // 清除之前的定时器
        if (this.scrollTimer) {
          clearTimeout(this.scrollTimer)
        }
        
        // 设置定时器，滚动停止后恢复
        this.scrollTimer = setTimeout(() => {
          this.isScrolling = false
        }, 150)
      }, 50) // 50ms 的节流间隔
    }
  },

  beforeDestroy () {
    // 组件销毁前清除定时器
    if (this.scrollTimer) {
      clearTimeout(this.scrollTimer)
    }
    if (this.throttleTimer) {
      clearTimeout(this.throttleTimer)
    }
  }
}
</script>

<style lang="less">
/* stylelint-disable */

.general-list-section {
  width: 100%;
  overflow-y: auto;
  height: 100%;
  height: 600px;
  scroll-behavior: smooth; /* 平滑滚动 */

  .list-item-page {

  }
}
 
</style>
